<template>
  <el-card class="card">
    <el-row>
      <el-col
        v-for="item in feedback"
        :key="item.label"
        class="card-item"
        :span="12"
      >
        <div class="card-item-label">{{ item.label }}:</div>
        <div class="card-item-value">{{ item.value }}</div>
      </el-col></el-row
    >
  </el-card>
</template>

<script>
export default {
  name: "Card",
  props: ["feedback"],
};
</script>

<style scoped>
.card {
  width: 400px;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.card-item {
  display: flex;
  margin-bottom: 10px;
}

.card-item-label {
  width: 80px;
  font-weight: bold;
  text-align: justify;
}

.card-item-value {
  flex: 1;
}
</style>